
$height = 100vh
$width = 100vw

.home{
  width 100%
  height 100%
  min-width 1200px
  background url('../assets/img/bg.png') no-repeat center
  background-size 100% 100%
  .container{
    width: 100%
    height 100%
  }
}
header{
  width 100%
  height 80px
  line-height 80px
  background-color rgba(0,13,58,0.35)
  padding 0 2%
  font-size: 0
  .logo{
    display inline-block
    width 54px
    height 54px
    background url('../assets/img/logo.png') no-repeat center
    background-size 100% 100%
    vertical-align: middle
  }
  h2{
    display inline-block
    font-size: 22px
    color: #ffffff
    margin-left: 20px 
    margin-right: 50px
    vertical-align: middle
  }
  .form-wrapper{
    display inline-block
    width: 28%
    vertical-align: middle
  }
}
.section-main{
  position relative
  height calc(100% - 80px)
  padding: (30/1080)*$height (30/1920)*$width
  overflow: hidden
  .left, .right {
    display inline-block
    height 100%
    vertical-align: middle
  }
  .left {
    position: absolute
    top: (30/1080)*$height
    left: (30/1920)*$width
    width: auto;
    height 100%
    max-width: 35%;
    z-index: 2
  }
  .right{
    width: 100%;
  }
}

//section-main left
.left-content{
  position relative
  display: inline-block
  width: (290 / 1920) * $width
  height (456 / 1080) * $height
  background: url('../assets/img/left-bg.png') no-repeat center
  background-size: 100% 100%
  padding: (50/860) * 100% (15/360) * 100%
  margin-right: 10px
  margin-top: 10px
  overflow: hidden
  vertical-align: middle
  .closebtn{
    position absolute
    top: (20/860) * 100%
    right: (15/360) * 100%
    color: #ffffff
    font-size: 18px
    transition: .4s all
    cursor pointer
    &:hover{
      color: #409EFF
    }
  }
  .img-wrapper{
    position relative
    width: 80px
    height: 80px
    border-radius: 50%
    overflow: hidden
    margin: 0 auto
    &.default{
      background: url('../assets/img/img-default.jpg') no-repeat center
      background-size: 100% 100%
    }
    &.men{
      background: url('../assets/img/bg-men.png') no-repeat center
      background-size: 100% 100%
    }
    &.female{
      background: url('../assets/img/bg-female.png') no-repeat center
      background-size: 100% 100%
    }
    img{
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
      width 100%
      vertical-align middle
    }
  }
  .content-header{
    color: #ffffff
    margin-top: (40/860)*100%
    div{
      height 26px
      line-height: 26px
      font-size: 16px
    }
    span{
      display inline-block
      width: calc(100% - 40px)
      text-overflow: ellipsis
      overflow hidden
      vertical-align: middle
      &.men:after{
        display inline-block
        content: ''
        width: 24px
        height 24px
        margin-left: 3px
        vertical-align: middle
        background: url('../assets/img/icon-men.png') no-repeat center
        background-size: 100% 100%
      }
      &.women:after{
        display inline-block
        content: ''
        width: 20px
        height 20px
        margin-left: 3px
        vertical-align: middle
        background: url('../assets/img/icon-famle.png') no-repeat center
        background-size: 100% 100%
      }
    }
    .icon{
      display inline-block
      width: 20px
      height: 20px
      margin-right: 5px
      vertical-align: middle
    }
    .icon-name{
      background: url('../assets/img/icon-person.png') no-repeat center
      background-size: 100% 100%
    }
    .icon-zhen{
      background: url('../assets/img/icon-zhen.png') no-repeat center
      background-size: 100% 100%
    }
  }
  .content-list{
    margin-top: 4%
    padding-top: 4%
    border-top: 1px solid #000d3a
    .item{
      padding: 1.5% 0
      line-height: 18px
    }
    .label{
      position relative
      display inline-block
      width: 80px
      font-size: 14px
      color: #b3b3b3
      vertical-align: top
    }
    .value{
      display inline-block
      width: calc(100% - 80px)
      font-size: 14px
      color: #ffffff
      vertical-align: top
    }
  }
  .btn-wrapper{
    position absolute
    left: 50%
    bottom: (40/860) * 100%
    transform: translateX(-50%)
    .btn{
      font-size: 14px;
      color: #00a0e9
      border: 1px solid #00a0e9
      border-radius: 2px
      padding: 0 10px
      text-decoration: none
      transition: .4s all
      &:hover{
        color: #ffffff
        background-color: #00a0e9
      }
    }
  }
}

// 右键弹出框
.site-right{
  position: absolute
  display: inline-block
  width: 100px
  height: auto
  background-color: #fff
  z-index 9
  .item{
    height 30px
    line-height: 30px
    color: #333333
    font-size: 14px
    border-bottom: 1px solid #dddddd
    padding: 0 8px
    cursor pointer
    transition: .4s all
    &:hover {
      color: #00a0e9
    }
  }
  a{
    text-decoration: none
  }
}

@media screen and (max-height: 900px) {
  header{
    height 60px
    line-height 60px
    .logo{
      width: 40px
      height 40px
    }
    h2{
      font-size: 20px
    }
  }
  .section-main{
    height calc(100% - 60px)
  }
  .left-content{
    .img-wrapper{
      width: 60px
      height 60px
    }
    .content-header{
      div{
        font-size: 15px
      }
    }
    .content-list{
      .label, .value{
        font-size: 13px
      }
    }
  }
}
@media screen and (max-height: 768px) {
  header{
    height 50px
    line-height 50px
  }
  .section-main{
    height calc(100% - 50px)
  }
  .left-content{
    .img-wrapper{
      width: 40px
      height 40px
    }
    .content-header{
      div{
        font-size: 13px
      }
    }
    .content-list{
      .label{
        width: 70px
      }
      .value{
        width: calc(100% - 70px)
      }
      .label, .value{
        font-size: 12px
      }
    }
  }
}